<template>
  <div
    class="overflow-hidden z-0 pt-2 sm:pt-20 pb-4 sm:pb-6 relative"
    data-v-0ac44673=""
  >
    <div class="flex" data-v-0ac44673="">
      <Items v-for="(item, index) in items" :key="index" :product="item" />
    </div>
  </div>
</template>

<script>
import Items from "./components/items.vue";
export default {
  components: { Items },
  data() {
    return {
      baseList:[],
      items: [],
    };
  },
  methods: {
    run(){
      let i = 0;
      let step = 20;
      const renderprod = () => {
        if(step*(i+1) > this.baseList.length) i = 0;
        this.items = this.baseList.slice(step*i,step*(i+1))
        i++;
      }
      renderprod()
      setInterval(() => {
        renderprod()
      }, 3000);
    },
    async fetchShops() {
      const response = await this.$api.getShops({
        type: "3",
      });
      this.baseList = response.data.data;
      this.run();
    },
  },
  mounted() {
    this.fetchShops();
    // setInterval(() => {
    //   this.fetchShops();
    // }, 3000); // 3 minutes
  },
};
</script>

<style></style>
